<template>
  <!-- 高级检索 -->
  <div class="advanced-search-box">
    <ul>
      <li>
        <span class="tit">专利数量:</span>
        <p class="tag">
          <span
            v-for="(val, i) in advancedData"
            :key="i"
            :class="{ active: val.status }"
            @click="changeTag(val.name)"
          >
            <i>{{ val.name }}</i>
          </span>
        </p>
      </li>
      <!-- <li class="li-select">
        <span class="tit">领域:</span>
        <el-cascader
          size="small"
          placeholder="全部"
          :props="cascaderProps"
          v-model="advancedForm.indus"
          class="elcascader"
        ></el-cascader>
      </li> -->
      <li class="li-select">
        <span class="tit">地区:</span>
        <el-select
          v-model="advancedForm.region"
          size="small"
          placeholder="全部"
          class="elselect"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </li>
      <div class="tools">
        <span class="search-btn" @click="search">查询</span>
        <span class="reset-btn" @click="reset">全部重置</span>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    let that = this;
    return {
      advancedData: [
        {
          name: "全部",
          status: true
        },
        {
          name: "100以上",
          fieldValue: 3,
          status: false
        },
        {
          name: "20-100",
          fieldValue: 2,
          status: false
        },
        {
          name: "20以下",
          fieldValue: 1,
          status: false
        }
      ],
      areaOptions: [
        {
          value: null,
          label: '全部',
        }
      ],
      advancedForm: {
        // indus: null, // 产业领域
        region: null, // 注册地区
      },
      cascaderProps: {
        checkStrictly: true,
        lazy: true,
        emitPath: false,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            if (node.level == 0) {
              that
                .$get(that.$Url.company.getRootNode)
                .then((res) => {
                  let data = res.data;
                  let areas = data.map((item) => ({
                    value: item.code,
                    label: item.name,
                    leaf: !item.hasChild,
                  }));
                  resolve(areas);
                })
                .catch((err) => {
                  console.log(err);
                });
            } else if (node.level > 0) {
              that
                .$get(that.$Url.company.getChildNode, {
                  parent: node.value,
                })
                .then((res) => {
                  const areas = res.data.map((item) => ({
                    value: item.code,
                    label: item.name,
                    leaf: !item.hasChild,
                  }));
                  resolve(areas);
                })
                .catch((err) => {
                  console.log(err);
                });
            }
          }, 0);
        },
      },
    };
  },
  beforeMount() {
    this.areaSelect();
  },
  methods: {
    changeTag(name) {
      this.advancedData.map((item) => {
        item.status = item.name === name ? true : false;
      });
    },
    search() {
      let formValue = JSON.parse(JSON.stringify(this.advancedForm));
      const select = this.advancedData.find((val) => val.status);
      if (select.fieldValue) {
        formValue['count'] = select.fieldValue;
      }
      this.$emit("search", formValue);
    },
    // 区县
    areaSelect() {
      this.$post(this.$Url.patent.regionInfo, {
        supId: "000000", // 根据上级ID查询所属下级机构，最顶级criCode是 000000  苏州320000
      })
        .then((res) => {
          if (res.data) {
            res.data.forEach((i) => {
              this.areaOptions.push({
                value: i.criCode,
                label: i.criName,
              });
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    reset() {
      this.advancedData = [
        {
          name: "全部",
          status: true
        },
        {
          name: "100以上",
          fieldValue: 3,
          status: false
        },
        {
          name: "20-100",
          fieldValue: 2,
          status: false
        },
        {
          name: "20以下",
          fieldValue: 1,
          status: false
        }
      ]
      this.$set(this.advancedForm, 'region', null)
    }
  },
};
</script>

<style lang="scss" scoped>
.advanced-search-box {
  width: 100%;
  position: absolute;
  top: 0.77rem;
  z-index: 99;
  ul {
    width: 10.32rem;
    margin: 0 auto;
    background: #fff;
    padding: 0.16rem 0.2rem;
    border-radius: 0.06rem;
    box-shadow: 0 -0.02rem 0.12rem 0 rgba(0, 0, 0, 0.1);
    li {
      line-height: 0.26rem;
      font-size: 0.14rem;
      display: flex;
      .tit {
        display: inline-block;
        color: #556381;
        width: 1rem;
        flex: none;
      }
      .tag {
        flex: auto;
        display: flex;
        flex-wrap: wrap;
        span {
          line-height: 0.26rem;
          display: inline-block;
          margin-right: 0.12rem;
          margin-bottom: 0.14rem;
          i {
            display: inline-block;
            height: 0.18rem;
            line-height: 0.18rem;
            border-radius: 0.06rem;
            padding: 0 0.1rem;
            color: $mainColor;
            font-size: 0.13rem;
            cursor: default;
          }
        }
        .active i {
          background: $mainColor;
          color: #fff;
        }
      }
    }
    .li-select {
      margin-bottom: 0.14rem;
      .elcascader,
      .elselect {
        height: 0.26rem;
        line-height: 0.26rem;
      }
      ::v-deep .el-input {
        width: 3.6rem;
        height: 0.26rem;
        line-height: 0.26rem;
        .el-input__inner {
          height: 0.26rem;
          line-height: 0.26rem;
          border: 0;
          background: #eeeff3;
          color: #636568;
          &:focus {
            border: 1px solid $mainColor;
          }
        }
        .el-input__icon {
          color: #6a7188;
          line-height: 0.26rem;
        }
      }
    }
    .tools {
      font-size: 0.14rem;
      color: #fff;
      padding-top: 0.1rem;
      display: flex;
      justify-content: center;
      .search-btn {
        display: inline-block;
        width: 2.26rem;
        height: 0.3rem;
        line-height: 0.3rem;
        margin-right: .3rem;
        background: $mainColor;
        border-radius: 0.06rem;
        text-align: center;
        cursor: pointer;
      }
      .reset-btn {
        color: #556381;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
